<template>
<el-tabs type="border-card" v-model="activeName" @tabChange="changeTab">
    <el-tab-pane label="基本信息" name="BaseDetail">
<!--        <base-detail></base-detail>-->
    </el-tab-pane>
    <el-tab-pane label="实时监控" name="Live">
<!--        <live :is-history="false"></live>-->
    </el-tab-pane>
    <el-tab-pane label="监控回放" name="HistoryLive">
<!--        <history-live></history-live>-->
    </el-tab-pane>
    <el-tab-pane label="监控事件" name="SurveillanceEventList">
<!--        <SurveillanceEventList :surveillanceId="id" v-if="id" />-->
    </el-tab-pane>
  <keep-alive :exclude="['Live','HistoryLive']">
     <component :is="activeComponent" :surveillanceId="id"></component>
  </keep-alive>
</el-tabs>
</template>
<script setup name="SurveillanceDetail">
import SurveillanceEventList from "../surveillanceEvent/index_back.vue"
import BaseDetail from './components/BaseDetail.vue'
import Live from './components/Live.vue'
import HistoryLive from './components/HistoryLive.vue'
import {useRoute} from "vue-router";
const id =ref("")
const route = useRoute();
id.value = route.query.id

const activeName = ref('BaseDetail');
const activeComponent = ref(BaseDetail);
const changeTab = ()=>{
  if(activeName.value === "BaseDetail"){
    activeComponent.value = BaseDetail
  }else if(activeName.value === 'SurveillanceEventList'){
    activeComponent.value = SurveillanceEventList
  }else if(activeName.value === 'Live'){
    activeComponent.value = Live
  }else if(activeName.value === 'HistoryLive'){
    activeComponent.value = HistoryLive
  }
}

</script>
